import React, { Component } from 'react';
import { Carousel } from 'antd-mobile';
import './IndexSwiper.less';

export default class IndexSwiper extends Component {
    render() {
        return (
            <div className='index-swiper'>
                <Carousel
                    infinite
                    // autoplay
                    autoplayInterval={5000}
                    dotStyle={{ width: '0.8rem', height: '0.03rem', borderRadius: 10, background: 'rgba(252,58,58,0.3)', bottom: '-0.5rem' }}
                    dotActiveStyle={{ width: '0.8rem', height: '0.03rem', borderRadius: 10, background: 'rgba(252,58,58,1)' }}
                    className='swiper'>
                    {
                        this.props.list.map(item => {
                            return (
                                <div className='swiper-slider' key={item.id}>
                                    <img className='swiper-image' src={item.imgUrl} alt="" />
                                </div>
                            )
                        })
                    }
                </Carousel>
            </div>
        );
    }
}